<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- 1：了解表单所有组件 -->
    <form action="receive.html" method="GET">
      <fieldset>
        <legend>表单组件集锦</legend>
        <!-- 文本输入 -->
        <div>
          <label for="activityName">活动名称</label>
          <input type="text" name="activityName" id="activityName" />
        </div>
        <!-- 下拉列表-->
        <div>
          <label for="area">活动区域</label>
          <select name="cars" id="area">
            <option value="activityOne" data-style="area">活动区域一</option>
            <option value="activityTwo" data-style="area">活动区域二</option>
          </select>
        </div>
        <!-- y:m:d 可以添加限制 -->
        <div>
          <label for="activityTime">活动时间</label>
          <input type="date" name="date" id="activityTime"/>
          -
          <input type="time" name="time"/>
        </div>

        <!-- 多选 -->
        <div >
          <label for="nature">活动性质</label>
          <input
            type="checkbox"
            name="vehicle"
            id="nature"
            value="restanrent"
            checked
          />美食/餐厅线上活动
          <input
            type="checkbox"
            name="vehicle"
            id="nature"
            value="Car"
          />地推活动
          <input
            type="checkbox"
            name="vehicle"
            id="nature"
            value="Car"
          />线下主题活动
          <input
            type="checkbox"
            name="vehicle"
            id="nature"
            value="Car"
          />单纯品牌曝光
        </div>

        <!-- 单选 -->
        <div>
          <label for="specials">特殊资源</label>
          <input
            type="radio"
            name="specials"
            value="onLine"
            id="specials"
            checked
          />线上品牌商赞助
          <input
            type="radio"
            name="specials"
            value="downLine"
            id="specials"
          />线下场地免费
        </div>

        

        <!-- 文本域 -->
        <div class="textarea">
          <label for="activityType">活动形式</label>
          <textarea name="message" rows="2" cols="40" id="activityType">
          </textarea>
        </div>


        <!-- style="display: none;" -->
        <section style="display: none;">
          <div class="divider"></div>
        <!-- 预定义选项下拉列表 -->
        <div>
          <label for="password">密码</label>
          <p class="tips">密码输入框支持在对输入的信息进行匿名化</p>
          <input type="password" name="password" id="password" placeholder="请输入密码" />
        </div>
        <div class="divider"></div>
        <div>
          <label for="datalist">datalist</label>
          <p class="tips">datalist元素是input元素规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表</p>

          <input list="browsers" id="datalist" />
          <datalist id="browsers">
            <option value="Internet Explorer"></option>
            <option value="Firefox"></option>
            <option value="Chrome"></option>
            <option value="Opera"></option>
            <option value="Safari"></option>
          </datalist>
        </div>
        <div class="divider"></div>
        <!-- colorSelect -->
        <div>
          <label for="colorPicker">颜色选择器</label>
          <p class="tips">该类型用于应该包含颜色的输入字段，根据浏览器支持，颜色选择器会出现输入字段中</p>
          <input type="color" name="colorSelect" value="#409eff" id="colorPicker"/>
        </div>
        <div class="divider"></div>
        <!-- y:m:d h:m -->
        <div>
          <label for="dateTimeLocal">时间选择</label>
          <p class="tips">该输入类型允许用户选择日期和时间(无时区)，根据浏览器支持，日期选择器会出现在输入字段中</p>
          <input type="datetime-local" name="localDatetime" id="dateTimeLocal" />
        </div>
        <div class="divider"></div>
        <div>
          <label for="email">邮箱地址：</label>
          <p class="tips">该输入类型用于应该包含电子邮件地址的输入字段，根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证</p>

          <input type="email" name="email" id="email" placeholder="请输入邮箱" />
        </div>
        <div class="divider"></div>
        <div>
          <label for="month">月份选择</label>
          <p class="tips">该输入类型允许用户选择月份和年份，根据浏览器支持，日期选择器会出现输入字段中</p>

          <input type="month" name="month" id="month"/>
        </div>
        <div class="divider"></div>
        <div>
          <label for="num">数字输入</label>
          <p class="tips">该输入类型用于应该包含数字值得输入字段，可以对数字做出限制</p>
          <input type="number" name="num" id="num" placeholder="请输入数字" />
        </div>
        <div class="divider"></div>
        <!-- 进度条 -->
        <div>
          <label for="range">进度条</label>
          <p class="tips">该输入类型用于应该包含一定范围内的值的输入字段，根据浏览器支持，输入字段能够显示为滑块控件</p>
          <input type="range" name="points" min="0" max="10" id="range" />
        </div>
        <div class="divider"></div>
        <div>
          <label for="url">网址输入</label>
          <p class="tips">该输入类型用于应该包含URL地址的输入字段，根据浏览器支持，在提交时能够自动验证url字段</p>
          <input type="url" name="url" id="url" placeholder="请输入合法网址" />
        </div>
        <div class="divider"></div>
        <div>
          <label for="week">周数选择</label>
          <p class="tips">该输入类型允许用户选择周和年，根据浏览器支持，日期选择器会出现输入字段中</p>
          <input type="week" name="week" id="week"/>
        </div>
        <div class="divider"></div>
        <div class="upload">
          <label for="imgFile">图片上传</label>
          <input type="file" name="img" multiple="multiple" id="imgFile" />
        </div>
      </section>
      <div class="divider"></div>
        <!-- 提交按钮 -->
        <input type="submit" value="立即创建" />
        <input type="reset" value="重置" />
        <div class="btnContainer">
          <span id="moreBtn" title="点击显示更多表单组件">更多</span>
        </div>
      </fieldset>
    </form>
    <script src="./index.js"></script>
  </body>
</html>
